<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{float: left;}
    </style>
    <script src="../static/js/jquery-2.1.4.min.js"></script>
</head>
<body>
    <h1>人脸识别测试页面</h1>
    <input id="name" type="text" style="width: 800px;height: 54px;">
    <button id="but" style="width: 60px;height: 60px;">确定</button>
    <br>
    <h2></h2>
    <img id="max" src="" alt="" width="1000">
    <img id="min" width="200" height="200" src="" alt="">
</body>
<script>
    $("#but").click(function () {
        $.ajax({
            type:"get",
            url:"http://"+window.location.host+"/face",
            async:false,
            data:{
                id:$("#name").val(),
                x:200,
                y:200
            },
            success:function (res) {
                let data = JSON.parse(res);
                if(data.url != ""){
                    $("#max").attr("src","./"+data.url);
                    $("#max").css("display","block");
                    $("#min").css("display","block");
                    $("h2").css("display","none");
                }else{
                    $("max").css("display","none");
                    $("min").css("display","none");
                    $("h2").css("display","block");
                    $("h2").html(data.msg);
                }
            }
        })
    })





</script>
</html>